<template>
  <div class="info_page">
    <CommonHeader title="编辑信息" />
    <div class="info_content page_no_tab_bar">
      <!-- 头像 -->
      <div class="avatar_box">
        <div class="camera_icon">
          <img src="@/assets/profile/account/camera_icon.png" alt="">
        </div>
        <div class="cover"></div>
        <img :src="user.userInfo.avatar" alt="" />
      </div>
      <!-- 用户名 -->
      <div class="input_box">
        <div class="input">
          <input
            type="text"
            v-model="ruleForm.userName"
            placeholder="请输入昵称"
          />
        </div>
      </div>
      <!-- 操作按钮 -->
       <div class="operate_btn">保存</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { useUserInfo } from "@/stores/userInfo";
import { useRouter } from "vue-router";

// 获取路由信息
const router = useRouter;
// 获取用户信息
const user = useUserInfo();
// 表单数据
const ruleForm: any = ref({
  avatar: "",
  userName: "",
});

onMounted(()=>{
  ruleForm.value = {
    avatar: user.userInfo
  }
})
</script>

<style lang="scss" scoped>
.info_page {
  .info_content {
    padding-top: 10px;
    .avatar_box {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      img {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        overflow: hidden;
      }
      .cover {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
      }
      .camera_icon {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
        }
      }
      
    }
    .input_box {
      margin-top: 20px;
    }
    .operate_btn {
      margin-top: 50px;
    }
  }
}
</style>
